<template>
	<view>
		<view class="shop">
			<image src="/static/img/logo2.png" mode="aspectFill" />
			<view class="text">
				<view class="name">订单号：SZ1231312402100</view>
				<view class="name">货号：SZ1231312402100</view>
				<view class="trait">分类：连衣裙</view>
			</view>
		</view>
		<view class="ordermsg">
			<view class="li">
				<text>供应商信息：</text>
				如意裁缝店
			</view>
			<view class="li">
				<text>数量：</text>
				1件
			</view>
			<view class="li">
				<text>客户名称：</text>
				何丽娟
			</view>
			<view class="li">
				<text>联系电话：</text>
				136****6544
			</view>
			<view class="li">
				<text>订单来源：</text>
				代理下单
			</view>
			<view class="li">
				<text>下单时间：</text>
				2019-07-01 10:00:00
			</view>
			<view class="li">
				<text>审核时间：</text>
				2019-07-01 10:00:00
			</view>

			<view class="li">
				<text>身高：</text>
				170CM
			</view>
			<view class="li">
				<text>体重：</text>
				50KG
			</view>
			<view class="li">
				<text>颜色：</text>
				红色 red
			</view>
			<view class="li">
				<text>尺码：</text>
				30
			</view>
			<view class="li">
				<text>下单人：</text>
				李宏伟
			</view>
			<view class="li">
				<text>所属代理：</text>
				代理商A
			</view>
			<view class="li">
				<text>收货地址：</text>
				广东省深圳市南山区永平路187号建业大厦15楼...
			</view>
			<view class="li">
				<text>快递单号：</text>
				SF123456789789
			</view>
			<view class="li">
				<text>状态：</text>
				已换货
			</view>
			<view class="li">
				<text>仓库：</text>
				外采仓
			</view>
			<view class="li">
				<text>客服名称：</text>
				客服A
			</view>
			<view class="li">
				<text>发货员：</text>
				发货员A
			</view>
			<view class="li">
				<text>发货时间：</text>
				2019-07-01 11:00:00
			</view>
			<view class="li">
				<text>操作时间：</text>
				2019-07-01 11:00:00
			</view>
			<view class="li">
				<text>备注：</text>
				尽快发货
			</view>
			<view class="li">
				<text>客服备注：</text>
				身高为175CM
			</view>
			<view class="li">
				<text>接收人：</text>
				接收员A
			</view>
			<view class="li">
				<text>接收时间：</text>
				2019-07-01 11:00:00
			</view>
		</view>
		<view class="button">
			<view class="li">
				<view class="first" @click="open(1)">入APP仓库</view>
				<view class="last" @click="open(2)">问题订单</view>
			</view>
			<view class="li">
				<view class="first" @click="open(3)">入次品库</view>
				<view class="last" @click="open(4)">驳 回</view>
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
		<uni-popup ref="receive" type="center">
			<view class="popup">
				<view class="title">商品入库</view>
				<view class="picker">
					<text>入库仓库：</text>

					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
				</view>
				<view class="picker">
					<text>仓库编码：</text>
					<input type="text" value="" placeholder="录入仓库编码" />
				</view>
				<view class="picker">
					<text>库位：</text>
					<input type="text" value="" placeholder="录入库位" />
				</view>
				<view class="picker">
					<text>序号：</text>
					<input type="text" value="" placeholder="录入序号" />
				</view>
				<view class="picker">
					<text>是否换货：</text>
					<radio-group @change="radioChange" class="radio-group">
						<label class="radio">
							<uni-icons type="circle-filled" v-show="is_barter == 1" color="#bd3c8c" class="icons"></uni-icons>
							<uni-icons type="circle" v-show="is_barter == 0" color="#999999" class="icons"></uni-icons>
							<radio value="1" checked="true" />
							是
						</label>
						<label class="radio">
							<uni-icons type="circle-filled" v-show="is_barter == 0" color="#bd3c8c" class="icons"></uni-icons>
							<uni-icons type="circle" v-show="is_barter == 1" color="#999999" class="icons"></uni-icons>
							<radio value="0" />
							否
						</label>
					</radio-group>
				</view>
				<view class="button">
					<view class="accept">确认入库</view>
					<view class="reject" @click="close(1)">取 消</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="issue" type="center">
					<view class="popup">
						<view class="title">问题订单</view>
						<view class="p">
							问题描述：
						</view>
						<view class="picker">
							<textarea value="" placeholder="" class="textall"/>
						</view>
						<view class="button">
							<view class="accept">确 认</view>
							<view class="reject" @click="close(2)">取 消</view>
						</view>
					</view>
				</uni-popup>
		<uni-popup ref="rejects" type="center">
			<view class="popup">
				<view class="title">商品入库</view>
				<view class="picker">
					<text>入库仓库：</text>
					<view class="radio-group">次品库</view>
				</view>
				<view class="picker">
					<text>是否瑕疵：</text>
					<picker @change="bindPickerChange" :value="is_flaw" :range="flaw">
						<view class="uni-input">{{ flaw[is_flaw] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
				</view>
<view class="picker">
					<text>备注：</text>
					<textarea value="" placeholder="" />
				</view>
				<view class="button">
					<view class="accept">确认入库</view>
					<view class="reject" @click="close(3)">取 消</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="reject" type="center">
			<view class="popup">
				<view class="title">驳回订单</view>
				<view class="picker">
					<text>驳回类型：</text>

					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
				</view>
				<view class="picker">
					<text>驳回原因：</text>
					<textarea value="" placeholder="" />
				</view>
				<view class="button">
					<view class="accept">确认驳回</view>
					<view class="reject" @click="close(4)">取 消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { uniIcons, uniPopup } from '@dcloudio/uni-ui';
import entrepot from '../../servers/entrepot/entrepot.js';
export default {
	components: { uniIcons, uniPopup },
	data() {
		return {
			array: ['中国', '美国', '巴西', '日本'],
			index: 0,
			flaw: ['是', '否'],
			is_flaw:0,
			is_go_top: false,
			is_barter: 1,
			style: 0
		};
	},
	mounted() {
		var _this = this
		// uni.getStorage({
		//     key: 'agentadvertisinglist',
		//     success: function (res) {
		//         _this.orderno = res.data;
		//     }
		// });
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	methods: {
		radioChange(e) {
			console.log(e.detail.value);
			this.is_barter = e.detail.value;
		},
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		open(e) {
			// 需要在 popup 组件，指定 ref 为 popup
			if (e == 1) {
				this.$refs.receive.open();
			} else if (e == 2) {
				this.$refs.issue.open();
			} else if (e == 3) {
				this.$refs.rejects.open();
			} else if (e == 4) {
				this.$refs.reject.open();
			}
		},
		close(e) {
			if (e == 1) {
				this.$refs.receive.close();
			} else if (e == 2) {
				this.$refs.issue.close();
			} else if (e == 3) {
				this.$refs.rejects.close();
			} else if (e == 4) {
				this.$refs.reject.close();
			}
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #fff;
}
.shop {
	padding: 50rpx 20rpx;
	display: flex;
	font-size: 26rpx;
	line-height: 44rpx;
	image {
		width: 244rpx;
		height: 244rpx;
		border-radius: 10rpx;
		margin-right: 28rpx;
	}
	.text {
		.trait {
			color: #999;
			font-size: 24rpx;
		}
	}
}
.ordermsg {
	border-top: 26rpx solid #f6f6f6;
	padding: 20rpx;
	.li {
		font-size: 24rpx;
		color: #999;
		line-height: 72rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text {
			display: inline-block;
			width: 182rpx;
			color: #333;
			text-align-last: justify;
			padding-right: 20rpx;
		}
	}
}
.button {
	padding: 0 20rpx;
	margin-top: 50rpx;
	.li {
		display: flex;
		flex-direction: row;
		margin-bottom: 60rpx;
		view {
			width: 278rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			font-size: 28rpx;
			margin: 0 45rpx;
		}
		.first {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.last {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
	}
}
.popup {
	width: 612rpx;
	padding: 44rpx 20rpx 79rpx;
	background: #ffffff;
	border-radius: 20rpx;
		font-size: 26rpx;
	.title {
		text-align: center;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.picker {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			display: block;
			font-size: 28rpx;
			width: 180rpx;
			text-align-last: justify;
		}
		input,
		textarea,
		picker {
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 26rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		textarea {
			height: 258rpx;
			padding: 20rpx;
			line-height: 50rpx;
		}
		.textall{
			width: 612rpx;
		}
		.radio-group {
			width: 557rpx;
			color: #999999;
			text {
				display: inherit;
			}
			.icons {
				margin: 0 20rpx;
			}
			radio {
				display: none;
			}
		}
		.uni-arrowdown {
			position: absolute;
			right: 0;
			top: 15rpx;
			width: 50rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
	}

	.button {
		margin-top: 50rpx;
		padding: 0 50rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
		view {
			width: 208rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			font-size: 28rpx;
			margin: 0 32.5rpx;
		}
		.accept {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.reject {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
	}
}
</style>
